<template>
    <div class="wrap-top clear-fix">
        <div class="user float-r">
            <span>{{user}},欢迎您！</span>
            <span class="logout-box" @click="logout">
                <Icon type="log-out" class="logout"></Icon>
                <i class="txt">退出</i>
            </span>
        </div>
        <Modal v-model="modal" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>退出确认</span>
            </p>
            <div style="text-align:center">
                <p>退出后，将无法进行操作！</p>
                <p>是否继续退出？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="confirmLogout">退出</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            modal: false,
            modal_loading: false
        }
    },
    computed: {
        ...mapGetters([
            'getUser'
        ]),
        user() {
            return sessionStorage.getItem('user');
        }
    },
    methods: {
        logout() {
            this.modal = true;
        },
        confirmLogout() {
            var that=this;
            this.modal_loading = true;
            setTimeout(() => {
                this.modal_loading = false;
                this.modal = false;
                this.$Message.success('退出成功！',1,function(){
                    sessionStorage.removeItem('user');
                    that.$router.push('/login');
                });
            }, 1000);
        }
    }
}
</script>
<style lang="less">
.wrap-top {
    height: 48px;
    width: 100%;
    position: absolute;
    left: 0;
    top:0;
    z-index: 1000;
    border-bottom: 1px solid #ccc;
    .user {
        height: inherit;
        line-height: 48px;
        span {
            display: inline-block;
            height: inherit;
            cursor: pointer;
            font-size: 18px;
            text-align: center;
            vertical-align: middle;
            padding:0 10px;
            &.logout-box .logout {
                font-size: 24px;
                display: block;
                margin-top: 8px;
            }
            i {
                display: block;
                font-size: 12px;
                line-height: 12px;
                font-style: normal;
                padding-top: 6px;
            }
        }
    }
}
</style>


